<template>
  <div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :activeIndex="2"
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width: 100%; max-width: 1200px">
        <!-- neck-->
        <div class="neck-box" v-loading="$store.state.isLoading">
          <div class="neck-img">
            <el-image
              lazy
              :src="dataList.photoURL != '' ? dataList.photoURL : morImg"
              style="height: 130px; width: 250px"
            ></el-image>
          </div>
          <div class="neck-content">
            <div class="title">
              {{ dataList.allocationName }}
            </div>
            <div class="sign">
              <span class="stu">{{
                `${dataList.numStus ? dataList.numStus : 0}次学习`
              }}</span
              ><span class="time">{{ createTime.split(" ")[0] }}</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="res-content" v-loading="$store.state.isLoading">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="赛项规程" name="1">
              <div v-if="interpretList.length == 0" class="con-item">
                <el-empty description="暂无数据"></el-empty>
              </div>
              <div
                class="con-item"
                v-if="interpretList.length != 0"
                ref="scrollContainer"
                @scroll="onScroll"
              >
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in interpretList"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, interpretList)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, interpretList)
                      "
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-if="item.mp4Url"
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                      <!-- <img
                      v-if="!item.shipinCheckout"
                      src="../../assets/images/shipin.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/shipinselect.png"
                      alt=""
                    /> -->
                    </div>
                    <div
                      @mouseenter="
                        onMouseEnter(item, 'pdf', index, interpretList)
                      "
                      @mouseleave="
                        onMouseLeave(item, 'pdf', index, interpretList)
                      "
                      class="pdf-box"
                      v-if="item.fileUrl"
                      @click.stop="handleOpenVideo()"
                    >
                      <a style="display: flex; flex-direction: column">
                        <img
                          src="../../assets/images/bigPdf.png"
                          style="height: 60px"
                          alt=""
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span
                              class="text"
                              style="width: 62px"
                              v-html="item.title"
                            ></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                          style="margin-left: 25px"
                          v-if="!item.iconCheckout"
                          src="../../assets/images/pdf.png"
                          alt=""
                        />
                        <img
                          v-else
                          style="margin-left: 25px"
                          src="../../assets/images/pdfselect.png"
                          alt=""
                        /> -->
                      </a>
                    </div>
                  </div>
                </div>

                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="在线题库" name="2">
              <div v-if="theoryList.length == '0'">
                <el-empty description="暂无数据"></el-empty>
              </div>
              <div
                class="con-item"
                ref="scrollContainer"
                @scroll="onScroll"
                v-else
              >
                <div
                  v-for="item in theoryList"
                  :key="item.id"
                  style="padding: 10px"
                  class="timu-list"
                >
                  <div class="co-top">
                    <div class="title">{{ item.title }}</div>
                    <div class="grade">
                      <!-- <span>{{ item.grade }}</span> -->
                    </div>
                  </div>
                  <div class="co-bottom">
                    <div>
                      <!-- <el-tag class="tag">{{ item.nums }}题</el-tag> -->
                      <el-tag class="tag">{{ item.templateType }}</el-tag>
                    </div>
                    <div
                      v-if="item.practiceRecordId"
                      style="
                        color: #409eff;
                        cursor: pointer;
                        margin-top: -40px;
                        font-size: 16px;
                      "
                      @click="handleGoUrl()"
                    >
                      <span>继续练习</span><i class="el-icon-arrow-right"></i>
                    </div>
                    <div
                      v-else
                      style="
                        color: #409eff;
                        cursor: pointer;
                        margin-top: -40px;
                        font-size: 16px;
                      "
                      @click="handleGoUrl()"
                    >
                      <span>开始练习</span><i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="竞赛试题" name="3">
              <div
                class="con-item"
                ref="scrollContainer"
                @scroll="onScroll"
                v-if="caseList != 0"
              >
                <div v-for="item in caseList" :key="item.id">
                  <div class="casebox">
                    <div>{{ item.title }}</div>
                    <div
                      style="color: #409eff; cursor: pointer"
                      @click="handleGoUrl()"
                    >
                      <span>开始练习</span><i class="el-icon-arrow-right"></i>
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
              <div v-else class="con-item">
                <el-empty description="暂无数据"></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane label="模拟赛场" name="4">
              <div class="con-item" v-if="imitateList.length == 0">
                <el-empty description="暂无数据"></el-empty>
              </div>

              <div
                class="con-item"
                v-if="imitateList.length != 0"
                ref="scrollContainer"
                @scroll="onScroll"
              >
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in imitateList"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-on:mouseenter="
                        onMouseEnter(item, 'pdf', index, imitateList)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'pdf', index, imitateList)
                      "
                    >
                      <!-- :href="item.fileUrl" -->
                      <a
                        style="
                          flex-direction: column;
                          display: flex;
                          align-items: center;
                        "
                      >
                        <el-image
                          :src="moniImage"
                          style="height: 60px; border-radius: 4px"
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              width: 160px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        style="margin-left: 10px"
                        v-if="!item.iconCheckout"
                        src="../../assets/images/pdf.png"
                        alt=""
                      />
                      <img
                        v-else
                        style="margin-left: 10px"
                        src="../../assets/images/pdfselect.png"
                        alt=""
                      /> -->
                      </a>
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="专家点评" name="5">
              <div class="con-item" ref="scrollContainer" @scroll="onScroll">
                <div style="margin-top: 10px">
                  <el-button
                    v-if="refereeList['综合']"
                    :type="abcShow == '综合' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = '综合'"
                    >综合</el-button
                  >
                  <el-button
                    v-if="refereeList.A"
                    :type="abcShow == 'A' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'A'"
                    >A赛场</el-button
                  >
                  <el-button
                    v-if="refereeList.B"
                    :type="abcShow == 'B' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'B'"
                    >B赛场</el-button
                  >
                  <el-button
                    v-if="refereeList.C"
                    :type="abcShow == 'C' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'C'"
                    >C赛场</el-button
                  >
                </div>
                <div
                  class="con-item"
                  v-if="
                    !refereeList.A &&
                    !refereeList.B &&
                    !refereeList['综合'] &&
                    !refereeList.C
                  "
                >
                  <el-empty description="暂无数据"></el-empty>
                </div>

                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in refereeList.A"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, refereeList.A)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, refereeList.A)
                      "
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                      <!-- <img
                      v-if="!item.shipinCheckout"
                      src="../../assets/images/shipin.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/shipinselect.png"
                      alt=""
                    /> -->
                    </div>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in refereeList.B"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, refereeList.B)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, refereeList.B)
                      "
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                      <!-- <img
                      v-if="!item.shipinCheckout"
                      src="../../assets/images/shipin.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/shipinselect.png"
                      alt=""
                    /> -->
                    </div>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in refereeList.C"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, refereeList.C)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, refereeList.C)
                      "
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                      <!-- <img
                      v-if="!item.shipinCheckout"
                      src="../../assets/images/shipin.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/shipinselect.png"
                      alt=""
                    /> -->
                    </div>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in refereeList['综合']"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="vd-box"
                      style="flex-direction: column"
                      @click="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, refereeList['综合'])
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, refereeList['综合'])
                      "
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                      <!-- <img
                      v-if="!item.shipinCheckout"
                      src="../../assets/images/shipin.png"
                      alt=""
                    />
                    <img
                      v-else
                      src="../../assets/images/shipinselect.png"
                      alt=""
                    /> -->
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="技能示范" name="6">
              <div class="con-item" v-if="practicalSkillList.length == 0">
                <el-empty description="暂无数据"></el-empty>
              </div>
              <div
                class="con-item"
                v-if="practicalSkillList.length != 0"
                ref="scrollContainer"
                @scroll="onScroll"
              >
                <div v-for="item in practicalSkillList" :key="item.id">
                  <div v-if="item.nodeType == 1" style="margin-bottom: -2px">
                    <el-collapse>
                      <el-collapse-item :title="item.title">
                        <recursive-collapse
                          :key="item.id"
                          :activeitem="item"
                          :abcShow="abcShow"
                          :isWatch="isWatch"
                        />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    :style="item.nodeType == 0 ? 'width: 16%;' : 'width: 0%;'"
                    v-for="(item, index) in practicalSkillList"
                    :key="item.id"
                  >
                    <div
                      style="flex-direction: column"
                      v-if="item.nodeType == 0"
                      class="vd-box"
                      @click="handleOpenVideo()"
                      v-on:mouseenter="
                        onMouseEnter(item, 'vedio', index, practicalSkillList)
                      "
                      v-on:mouseleave="
                        onMouseLeave(item, 'vedio', index, practicalSkillList)
                      "
                    >
                      <img
                        :src="item.imgUrl"
                        v-if="item.mp4Url.split('.').pop() == 'mp4'"
                        style="height: 60px"
                        alt=""
                      />
                      <img
                        src="../../assets/images/mp3.png"
                        style="height: 60px"
                        alt=""
                        v-if="item.mp4Url.split('.').pop() == 'mp3'"
                      />
                      <!-- <img
                        v-if="!item.shipinCheckout"
                        src="../../assets/images/shipin.png"
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/images/shipinselect.png"
                        alt=""
                      /> -->
                      <el-tooltip
                        :content="item.title"
                        placement="top"
                        effect="light"
                        popper-class="item-top-intro"
                      >
                        <div
                          style="
                            margin-top: 4px;
                            font-size: 16px;
                            width: 160px;
                            display: flex;
                            justify-content: space-evenly;
                          "
                        >
                          <span class="text" v-html="item.title"></span>
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="赛场再现" name="7">
              <div class="con-item" ref="scrollContainer" @scroll="onScroll">
                <div>
                  <!-- <el-button
                    :type="abcShow == 'A' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'A'"
                    >A赛场</el-button
                  > -->
                  <el-button
                    v-if="practicalMatchList['综合']"
                    :type="abcShow == '综合' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = '综合'"
                    >综合</el-button
                  >
                  <el-button
                    v-if="practicalMatchList.B"
                    :type="abcShow == 'B' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'B'"
                    >B赛场</el-button
                  >
                  <el-button
                    v-if="practicalMatchList.C"
                    :type="abcShow == 'C' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'C'"
                    >C赛场</el-button
                  >
                </div>
                <div
                  class="con-item"
                  v-if="
                    !practicalMatchList.B &&
                    !practicalMatchList['综合'] &&
                    !practicalMatchList.C
                  "
                >
                  <el-empty description="暂无数据"></el-empty>
                </div>
                <div
                  v-for="item in practicalMatchList.B"
                  :key="item.id"
                  style="margin-top: 10px"
                >
                  <div
                    style="margin-bottom: -12px"
                    v-if="
                      item.nodeType == 1 && item.module == abcShow
                        ? true
                        : false
                    "
                  >
                    <el-collapse>
                      <el-collapse-item :title="item.title">
                        <recursive-collapse
                          :key="item.id"
                          :activeitem="item"
                          :abcShow="abcShow"
                          :isWatch="isWatch"
                        />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMatchList.B"
                    :key="item.id"
                    :style="item.nodeType == 0 ? 'width: 16%;' : 'width: 0%;'"
                  >
                    <div v-if="item.nodeType == 0">
                      <div
                        style="flex-direction: column"
                        class="vd-box"
                        @click="handleOpenVideo()"
                        v-if="item.module == abcShow ? true : false"
                        v-on:mouseenter="
                          onMouseEnter(
                            item,
                            'vedio',
                            index,
                            practicalMatchList.B
                          )
                        "
                        v-on:mouseleave="
                          onMouseLeave(
                            item,
                            'vedio',
                            index,
                            practicalMatchList.B
                          )
                        "
                      >
                        <img
                          :src="item.imgUrl"
                          v-if="item.mp4Url.split('.').pop() == 'mp4'"
                          style="height: 60px"
                          alt=""
                        />
                        <img
                          src="../../assets/images/mp3.png"
                          style="height: 60px"
                          alt=""
                          v-if="item.mp4Url.split('.').pop() == 'mp3'"
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              width: 160px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        v-if="!item.shipinCheckout"
                        src="../../assets/images/shipin.png"
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/images/shipinselect.png"
                        alt=""
                      /> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-for="item in practicalMatchList.C"
                  :key="item.id"
                  style="margin-top: 10px"
                >
                  <div
                    style="margin-bottom: -12px"
                    v-if="
                      item.nodeType == 1 && item.module == abcShow
                        ? true
                        : false
                    "
                  >
                    <el-collapse>
                      <el-collapse-item :title="item.title">
                        <recursive-collapse
                          :key="item.id"
                          :activeitem="item"
                          :abcShow="abcShow"
                          :isWatch="isWatch"
                        />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMatchList.C"
                    :key="item.id"
                    :style="item.nodeType == 0 ? 'width: 16%;' : 'width: 0%;'"
                  >
                    <div v-if="item.nodeType == 0">
                      <div
                        style="flex-direction: column"
                        class="vd-box"
                        @click="handleOpenVideo()"
                        v-if="item.module == abcShow ? true : false"
                        v-on:mouseenter="
                          onMouseEnter(
                            item,
                            'vedio',
                            index,
                            practicalMatchList.C
                          )
                        "
                        v-on:mouseleave="
                          onMouseLeave(
                            item,
                            'vedio',
                            index,
                            practicalMatchList.C
                          )
                        "
                      >
                        <img
                          :src="item.imgUrl"
                          v-if="item.mp4Url.split('.').pop() == 'mp4'"
                          style="height: 60px"
                          alt=""
                        />
                        <img
                          src="../../assets/images/mp3.png"
                          style="height: 60px"
                          alt=""
                          v-if="item.mp4Url.split('.').pop() == 'mp3'"
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              width: 160px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        v-if="!item.shipinCheckout"
                        src="../../assets/images/shipin.png"
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/images/shipinselect.png"
                        alt=""
                      /> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-for="item in practicalMatchList['综合']"
                  :key="item.id"
                  style="margin-top: 10px"
                >
                  <div
                    style="margin-bottom: -12px"
                    v-if="
                      item.nodeType == 1 && item.module == abcShow
                        ? true
                        : false
                    "
                  >
                    <el-collapse>
                      <el-collapse-item :title="item.title">
                        <recursive-collapse
                          :key="item.id"
                          :activeitem="item"
                          :abcShow="abcShow"
                          :isWatch="isWatch"
                        />
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMatchList['综合']"
                    :key="item.id"
                    :style="item.nodeType == 0 ? 'width: 16%;' : 'width: 0%;'"
                  >
                    <div v-if="item.nodeType == 0">
                      <div
                        style="flex-direction: column"
                        class="vd-box"
                        @click="handleOpenVideo()"
                        v-if="item.module == abcShow ? true : false"
                        v-on:mouseenter="
                          onMouseEnter(
                            item,
                            'vedio',
                            index,
                            practicalMatchList['综合']
                          )
                        "
                        v-on:mouseleave="
                          onMouseLeave(
                            item,
                            'vedio',
                            index,
                            practicalMatchList['综合']
                          )
                        "
                      >
                        <img
                          :src="item.imgUrl"
                          v-if="item.mp4Url.split('.').pop() == 'mp4'"
                          style="height: 60px"
                          alt=""
                        />
                        <img
                          src="../../assets/images/mp3.png"
                          style="height: 60px"
                          alt=""
                          v-if="item.mp4Url.split('.').pop() == 'mp3'"
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              width: 160px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>

                        <!-- <img
                        v-if="!item.shipinCheckout"
                        src="../../assets/images/shipin.png"
                        alt=""
                      />
                      <img
                        v-else
                        src="../../assets/images/shipinselect.png"
                        alt=""
                      /> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="物料清单" name="8"
              ><div class="con-item" ref="scrollContainer" @scroll="onScroll">
                <div style="margin-top: 10px">
                  <el-button
                    v-if="practicalMaterialList['综合']"
                    :type="abcShow == '综合' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = '综合'"
                    >综合</el-button
                  >
                  <el-button
                    v-if="practicalMaterialList.B"
                    :type="abcShow == 'B' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'B'"
                    >B赛场</el-button
                  >
                  <el-button
                    v-if="practicalMaterialList.C"
                    :type="abcShow == 'C' ? 'primary' : ''"
                    size="mini"
                    plain
                    @click="abcShow = 'C'"
                    >C赛场</el-button
                  >
                </div>
                <div
                  class="con-item"
                  v-if="
                    !practicalMaterialList.B &&
                    !practicalMaterialList['综合'] &&
                    !practicalMaterialList.C
                  "
                >
                  <el-empty description="暂无数据"></el-empty>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMaterialList.B"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="pdf-box"
                      @click.stop="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList.B
                        )
                      "
                      v-on:mouseleave="
                        onMouseLeave(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList.B
                        )
                      "
                    >
                      <a style="flex-direction: column; display: flex">
                        <img
                          src="../../assets/images/bigPdf.png"
                          style="height: 60px"
                          alt=""
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        style="margin-left: 10px"
                        v-if="!item.iconCheckout"
                        src="../../assets/images/pdf.png"
                        alt=""
                      />
                      <img
                        v-else
                        style="margin-left: 10px"
                        src="../../assets/images/pdfselect.png"
                        alt=""
                      /> -->
                      </a>
                    </div>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMaterialList.C"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="pdf-box"
                      @click.stop="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList.C
                        )
                      "
                      v-on:mouseleave="
                        onMouseLeave(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList.C
                        )
                      "
                    >
                      <a style="flex-direction: column; display: flex">
                        <img
                          src="../../assets/images/bigPdf.png"
                          style="height: 60px"
                          alt=""
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        style="margin-left: 10px"
                        v-if="!item.iconCheckout"
                        src="../../assets/images/pdf.png"
                        alt=""
                      />
                      <img
                        v-else
                        style="margin-left: 10px"
                        src="../../assets/images/pdfselect.png"
                        alt=""
                      /> -->
                      </a>
                    </div>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in practicalMaterialList['综合']"
                    :key="item.id"
                    style="width: 16%"
                  >
                    <div
                      class="pdf-box"
                      @click.stop="handleOpenVideo()"
                      v-if="item.module == abcShow ? true : false"
                      v-on:mouseenter="
                        onMouseEnter(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList['综合']
                        )
                      "
                      v-on:mouseleave="
                        onMouseLeave(
                          item,
                          'pdf',
                          index,
                          practicalMaterialList['综合']
                        )
                      "
                    >
                      <a style="flex-direction: column; display: flex">
                        <img
                          src="../../assets/images/bigPdf.png"
                          style="height: 60px"
                          alt=""
                        />
                        <el-tooltip
                          :content="item.title"
                          placement="top"
                          effect="light"
                          popper-class="item-top-intro"
                        >
                          <div
                            style="
                              margin-top: 4px;
                              font-size: 16px;
                              display: flex;
                              justify-content: space-evenly;
                            "
                          >
                            <span class="text" v-html="item.title"></span>
                          </div>
                        </el-tooltip>
                        <!-- <img
                        style="margin-left: 10px"
                        v-if="!item.iconCheckout"
                        src="../../assets/images/pdf.png"
                        alt=""
                      />
                      <img
                        v-else
                        style="margin-left: 10px"
                        src="../../assets/images/pdfselect.png"
                        alt=""
                      /> -->
                      </a>
                    </div>
                  </div>
                </div>

                <div
                  v-if="isAtBottom"
                  style="text-align: center; padding: 20px 0px; color: gray"
                >
                  没有更多了~
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 视频弹窗 -->
      <el-dialog
        :title="videoTitle"
        :visible.sync="videoDialogVisible"
        custom-class="dialog-box"
      >
        <div class="dialog-video1" :class="{ fullscreen: isFullscreen }">
          <video
            ref="vueMiniPlayer"
            @canplay="getVidDur()"
            style="max-height: 500px; min-width: 500px"
            id="video"
            :src="mp4Url"
            controls="true"
            autoplay
            preload="auto"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            controlsList="nodownload"
          ></video>
          <img
            src="../../assets/images/mp3.png"
            style="width: 100px; margin: 0px auto; position: absolute"
            alt=""
            v-if="mp4Url.split('.').pop() == 'mp3'"
          />
          <div
            ref="watermarkContainer"
            class="watermark-container"
            v-if="mp4Url.split('.').pop() == 'mp4'"
          >
            <p class="watermark-text">
              {{
                $store.state.userData.mobile != ""
                  ? $store.state.userData.mobile
                  : $store.state.userData.userName
              }}
            </p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="toggleFullscreen"
            v-if="mp4Url.split('.').pop() == 'mp4'"
            >全屏播放</el-button
          >
          <el-button @click="handleCloseDialog">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import { permissionVerification } from "@/api/homePage.js";
import morImg from "../../assets/images/sxzy.png";
import moniImage from "../../assets/images/3d.png";
import { getResourceDetails, statisticBackup } from "@/api/resourcesDetails.js";
import RecursiveCollapse from "@/components/RecursiveCollapse.vue";
import { STATUS_CODE_OK } from "@/config";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
export default {
  name: "ResourcesDetails",
  data() {
    return {
      isFullscreen: false, // 控制是否全屏的标志
      morImg,
      isListeningScroll: true, // 用于控制是否监听滚动事件
      isAtBottom: false,
      videoTitle: "音视频预览", // 视频名称-弹窗
      videoDialogVisible: false, // 视频弹窗显示隐藏
      activeName: "1",
      isPageShow: true, //页面是否显示
      dataList: {},
      abcShow: "综合", //abc赛场
      mp4Url: "", // 视频地址
      interpretList: [], //规程解读
      imitateList: [], //模拟赛场
      refereeList: [], //裁判点评
      practicalSkillList: [], // 实操技能分析
      practicalMatchList: [], // 实操赛项视频
      practicalMaterialList: [], //实操物料清单
      theoryList: [], //理论题库
      caseList: [], //案例分析题
      timer: null,
      // classId: "88",
      allocationTitle: "", // 详情标题
      allocationId: "", // 详情id
      totalTime: "", // 视频总时长
      watchedTime: "", // 视频观看总时长
      allocationItem: "", // 视频数据
      isPlay: true,
      createTime: "", //创建时间
      isWatch: false, // 是否拥有查看权限
      moniImage,
    };
  },
  watch: {
    // 赛场切换
    abcShow() {
      this.isListeningScroll = true; // 用于控制是否监听滚动事件
      this.isAtBottom = false;
    },
    // 资源模块切换
    activeName(val) {
      // if (val == "8" || val == "7"|| val == "5") {
      //   this.abcShow = "综合";
      // } else {
      //   this.abcShow = "综合";
      // }
      if (val == "8") {
        if (this.practicalMaterialList["综合"]) {
          this.abcShow = "综合";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.practicalMaterialList.B) {
          this.abcShow = "B";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.practicalMaterialList.C) {
          this.abcShow = "C";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
      }
      if (val == "7") {
        if (this.practicalMatchList["综合"]) {
          this.abcShow = "综合";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.practicalMatchList.B) {
          this.abcShow = "B";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.practicalMatchList.C) {
          this.abcShow = "C";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
      }
      if (val == "5") {
        if (this.refereeList["综合"]) {
          this.abcShow = "综合";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.refereeList.A) {
          this.abcShow = "A";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.refereeList.B) {
          this.abcShow = "B";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
        if (this.refereeList.C) {
          this.abcShow = "C";
          sessionStorage.setItem("resourcesTab", val);
          return false;
        }
      }
      sessionStorage.setItem("resourcesTab", val);
    },
    videoDialogVisible(val) {
      if (!val) {
        var elevideo = document.getElementById("video");
        this.watchedTime = elevideo.currentTime;
        this.totalTime = elevideo.duration;
        clearTimeout(this.timer);
        this.$refs.vueMiniPlayer.pause();
        // this.handleStatisticLearnTime();
        if (
          !this.isWatch &&
          document.getElementById("video").currentTime > 30
        ) {
          // document.exitFullscreen();
          this.$message({
            message: "试看30s结束,请联系管理员添加观看权限！",
            type: "warning",
            duration: 3000,
          });
        }
      }
    },
  },
  async created() {
    await this.handleGetData();
    await this.handleGetResourceDetails();
    this.isAtBottom = false;
    // 后退跳转路由设置
    sessionStorage.setItem("goback", this.$route.fullPath);
    // 进入页面tab回显
    if (sessionStorage.getItem("resourcesTab")) {
      this.activeName = sessionStorage.getItem("resourcesTab");
    }
  },
  mounted() {
    // 初始化时检查一次是否已经在底部
    this.checkIfAtBottom();
    // 绑定滚动事件监听器
    this.$refs.scrollContainer.addEventListener("scroll", this.onScroll);
  },
  beforeDestroy() {
    // 清理监听器，防止内存泄漏
    this.$refs.scrollContainer.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    // 权限校验
    async hanldePermissionVerification() {
      let { data } = await permissionVerification({
        allocationId: this.allocationId,
      });
      if (data.code == STATUS_CODE_OK) {
        this.isWatch = data.success;
        if (!this.isWatch) {
          this.$message({
            message: "该资源暂无完整观看权限，视频试看时间为30s!",
            type: "warning",
            duration: 3000,
          });
        }
      }
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
      // 使用JavaScript来控制全屏，这里是一个简化的示例，实际应用中可能需要考虑兼容性问题
      if (this.isFullscreen) {
        document.querySelector(".dialog-video1").requestFullscreen();
      }
      //  else if (document.exitFullscreen) {
      //   document.exitFullscreen();
      // }
    },
    handleClick() {
      this.isListeningScroll = true; // 用于控制是否监听滚动事件
      this.isAtBottom = false;
    },
    onScroll() {
      if (!this.isListeningScroll) {
        return false;
      } // 如果不监听滚动，则直接返回
      // 检查是否滚动到底部
      this.checkIfAtBottom();
    },
    checkIfAtBottom() {
      // 获取滚动元素
      const scrollElement = this.$refs.scrollContainer;
      // 计算是否滚动到底部
      const isAtBottom =
        scrollElement.scrollHeight - scrollElement.scrollTop <=
        scrollElement.clientHeight;
      // 更新数据，Vue会自动处理DOM更新
      this.isAtBottom = isAtBottom;
      // 如果已经滚动到底部，暂停监听滚动事件
      if (isAtBottom) {
        this.isListeningScroll = false;
        // 可以在这里添加一个setTimeout来在一段时间后恢复监听，比如用户可能需要稍微滚动一下再回到顶部
        setTimeout(() => {
          this.isListeningScroll = true;
        }, 200); // 举例，200毫秒后恢复监听
      }
    },
    // 跳转考试页面
    // urlName
    handleGoUrl() {
      this.$message({
        message: "暂无权限，请联系管理员添加权限！",
        type: "warning",
        duration: 3000,
      });
      return false;
    },
    // 鼠标进入事件
    onMouseEnter(item, icon, index, arr) {
      if (icon == "pdf") {
        arr.forEach((eitem) => {
          if (eitem.id == item.id) {
            item.iconCheckout = true;
            arr.splice(index, 1, item);
          }
        });
      } else {
        arr.forEach((eitem) => {
          if (eitem.id == item.id) {
            item.shipinCheckout = true;
            arr.splice(index, 1, item);
          }
        });
      }
    },
    // 鼠标离开事件
    onMouseLeave(item, icon, index, arr) {
      if (icon == "pdf") {
        arr.forEach((eitem) => {
          if (eitem.id == item.id) {
            item.iconCheckout = false;
            arr.splice(index, 1, item);
          }
        });
      } else {
        arr.forEach((eitem) => {
          if (eitem.id == item.id) {
            item.shipinCheckout = false;
            arr.splice(index, 1, item);
          }
        });
      }
    },
    // pdf和视频存档接口
    async handleStatisticBackup(item) {
      // 播放速度
      // if (this.$refs.vueMiniPlayer.playbackRate) {
      //   this.$refs.vueMiniPlayer.playbackRate = 1;
      // }
      let { data } = await statisticBackup({
        allocationId: item.allocationId,
        // classId: this.classId,
        allocationsId: item.id,
      });
      if (data.data == null) {
        this.$refs.vueMiniPlayer.currentTime = 0;
      } else {
        this.$refs.vueMiniPlayer.currentTime = data.data.watchedTime;
      }
    },
    // pdf和视频更新记录
    // async handleStatisticLearnTime(item = {}, isPdf = false) {
    //   if (isPdf) {
    //     this.allocationItem = item;
    //   }
    //   if (
    //     this.allocationItem.mp4Url != "" ||
    //     this.allocationItem.fileUrl != ""
    //   ) {
    //     let totalTime = isPdf ? "0" : this.totalTime.toFixed(0);
    //     let watchedTime = isPdf ? "0" : this.watchedTime.toFixed(0);
    //     await statisticLearnTime({
    //       allocationId: this.allocationItem.allocationId,
    //       watchedTime: watchedTime,
    //       totalTime: totalTime,
    //       // classId: this.classId,
    //       allocationsId: this.allocationItem.id,
    //       allocationTitle: this.allocationItem.title,
    //     });
    //   }
    // },
    // 视频时间检测弹窗
    handleOpenMessageBox() {
      this.$confirm("系统检测到您长时间未操作，是否继续播放！", "", {
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "视频继续播放",
          });
          this.isPlay = true;
          this.$refs.vueMiniPlayer.play();
        })
        .catch(() => {
          this.isPlay = true;
        });
    },
    // 关闭弹窗
    handleCloseDialog() {
      this.$refs.vueMiniPlayer.pause();
      this.videoDialogVisible = false;
      clearTimeout(this.timer);
    },
    //获取视频播放时间
    getVidDur() {
      var elevideo = document.getElementById("video");
      // elevideo.addEventListener("seeked", () => {
      //   console.log("拖拽进度条");
      //   // 设置视频的当前时间为视频的总时间，这样进度条会停留在最后一帧
      //   return false;
      // });
      elevideo.addEventListener("timeupdate", () => {
        if (elevideo.currentTime > 30 && !this.isWatch) {
          console.log("试看结束");
          // document.exitFullscreen();
          this.handleCloseDialog(); //暂停
          return false;
        }
      });
      elevideo.addEventListener("play", () => {
        this.watchedTime = elevideo.currentTime;
        this.totalTime = elevideo.duration;
        //播放
        console.log("开始播放");
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.$refs.vueMiniPlayer.pause(); //暂停
          this.handleOpenMessageBox();
        }, 3090 * 5 * 60);
      });
      elevideo.addEventListener("playing", () => {
        this.watchedTime = elevideo.currentTime;
        this.totalTime = elevideo.duration;
        //播放中

        console.log("播放中");
      });
      elevideo.addEventListener("waiting", () => {
        //加载
        console.log("加载中");
      });
      elevideo.addEventListener("pause", () => {
        this.watchedTime = elevideo.currentTime;
        this.totalTime = elevideo.duration;
        //暂停
        clearTimeout(this.timer);
        console.log("暂停");
      });
      elevideo.addEventListener(
        "ended",
        () => {
          this.watchedTime = elevideo.currentTime;
          this.totalTime = elevideo.duration;
          //结束
          console.log("播放结束");
          clearTimeout(this.timer);
        },
        false
      );
    },
    // 获取本地基本详情数据
    handleGetData() {
      if (this.$route.params.row) {
        sessionStorage.setItem(
          "resDetailData",
          JSON.stringify(this.$route.params.row)
        );
      }
      this.dataList = JSON.parse(sessionStorage.getItem("resDetailData"))
        ? JSON.parse(sessionStorage.getItem("resDetailData"))
        : {};
    },
    // 获取接口详情具体数据
    async handleGetResourceDetails() {
      let { data } = await getResourceDetails({
        id: "1811309496694968322",
      });
      if (data.code == STATUS_CODE_OK) {
        this.allocationId = data.data.allocationId;
        // this.hanldePermissionVerification();
        this.dataList.numStus = data.data.numStu;
        this.dataList.allocationName = data.data.allocationName;
        this.dataList.photoURL = data.data.photoURL;
        this.createTime = data.data.createTime; // 创建时间
        this.interpretList = data.data.interpretList; //规程解读
        this.theoryList = data.data.theoryList; //理论题库
        this.caseList = data.data.caseList; //案例分析题
        this.imitateList = data.data.imitateList; //模拟赛场
        this.refereeList = data.data.refereeList; //裁判点评
        this.practicalSkillList = data.data.practicalSkillList; //实操技能分析
        this.practicalMatchList = data.data.practicalMatchList; //实操赛项视频
        this.practicalMaterialList = data.data.practicalMaterialList; //实操物料清单
      }
    },

    // 视频播放
    handleOpenVideo() {
      this.$message({
        message: "暂无该资源观看权限，请联系管理员添加权限！",
        type: "warning",
        duration: 3000,
      });
      return false;
    },
  },
  components: {
    // MHeader,
    // MFotter,
    RecursiveCollapse,
  },
};
</script>

<style>
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
</style>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-dialog__title {
  word-break: break-all;
}
.dialog-box {
  width: 80vw !important; /* 80%的视口宽度 */
  height: 80vh !important; /* 80%的视口高度 */
  max-width: 80% !important; /* 限制最大宽度，以防比例失真 */
  max-height: 80% !important; /* 限制最大高度 */
}
::v-deep .el-dialog {
  margin-top: 2vh !important;
  width: 70% !important;
}
::v-deep .el-dialog__body {
  padding: 0px !important;
}
/* 视频元素自适应 */
.dialog-video1 video {
  width: 100% !important; /* 让视频宽度充满对话框 */
  height: auto !important; /* 自动调整高度以保持宽高比 */
  max-height: calc(
    100% - 40px
  ) !important; /* 减去可能存在的顶部标题和底部按钮的高度 */
  object-fit: contain !important; /* 保持视频内容不失真 */
}
/* 如果需要调整水印容器的位置或大小，也可以在这里设置 */
.watermark-container {
  position: absolute !important; /* 假设水印需要绝对定位 */
  bottom: 10px !important; /* 距离底部的距离，按需调整 */
  // left: 10px !important; /* 距离左边的距离，按需调整 */
  /* 其他样式 */
}
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
.watermark-container {
  position: absolute;
  top: 0;
  left: 10%;
  // width: 1200px;
  width: 100%;
  max-width: 1200px;
  // width: 100% !important;
  // height: 100% !important;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  pointer-events: none !important; /* 确保水印不会响应鼠标事件 */
  opacity: 0.3;
}

.watermark-text {
  width: 300px;
  color: pink;
  font-size: 3em;
  position: relative;
  animation: ball 60s linear infinite !important; /* 飘动动画 */
}

@keyframes ball {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 0px;
    left: 70%;
  }
  50% {
    top: 700px;
    left: 70%;
  }
  75% {
    top: 700px;
    left: 0px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
.text {
  font-size: 12px !important;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0px;
}
::v-deep .el-collapse-item__header {
  font-weight: bold !important;
  font-size: 16px !important;
  padding-left: 20px;
  height: 60px !important;
  line-height: 60px !important;
}
::v-deep .el-collapse-item__arrow {
  font-size: 25px !important;
  font-weight: bold !important;
}
::v-deep .el-collapse-item__header {
  transition: background-color 0.3s; /* 添加过渡效果 */
}

::v-deep .el-collapse-item__header:hover {
  background: #f5f8fa;
  color: #1968fa; /* 鼠标悬停时的背景颜色 */
}
.content-overflow-scroll {
  height: 600px;
  overflow: auto;
  li {
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
    border: 1px solid #ececec;
    text-align: center;
  }
}
::v-deep .el-tabs__header {
  margin: auto;
}
::v-deep .el-tabs__nav {
  margin-left: 20px;
  padding: 20px 0px 10px 0px;
}
::v-deep .el-tabs__item {
  color: #8d9399;
  font-size: 16px;
}
::v-deep .el-tabs__item.is-active {
  color: #333;
}
::v-deep .el-tabs__item:hover {
  color: #333;
}
::v-deep .el-dialog__wrapper {
  overflow-y: hidden;
}
::v-deep .el-dialog__body {
  padding: 0px 0px !important;
  // display: flex;
  justify-content: space-evenly;
}
.dialog-box {
  .dialog-video1 {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    // max-height: 700px;
    // max-width: 1200px;
    // overflow: auto;
  }
}
.wrap {
  position: relative;
  background-color: $bg-color;
  .container {
    .res-content {
      border-radius: 10px 10px 10px 10px;
      background: #fff;
      // margin-bottom: 30px;
      padding-left: 20px;
      .con-item {
        height: 480px;
        .casebox {
          display: flex;
          justify-content: space-between;
          padding: 10px 20px;
          height: 60px;
          line-height: 40px;
        }
        .casebox:hover {
          background: #f5f8fa;
          color: #1968fa;
        }
        .timu-list:hover {
          background: #f5f8fa;
          color: #1968fa;
        }
        .co-top {
          display: flex;
          align-items: center;
          margin-left: 10px;
          .title {
            margin-right: 30px;
            font-size: 16px;
          }
        }
        .co-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 10px 0px 0px;
          .tag {
            border-radius: 50px;
            padding: 0px 20px;
            height: 25px;
            line-height: 25px;
            margin-right: 10px;
            text-align: center;
          }
        }
        overflow-y: auto;
        .el-divider--horizontal {
          margin: 0px;
        }
        .pdf-box {
          width: 55%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          padding: 10px 20px;
          color: #333;
        }
        .pdf-box a {
          // width: 100%;
          align-items: center;
          // height: 40px;
          color: #333;
          font-size: 14px;
          // line-height: 40px;
        }
        .pdf-box:hover {
          background: #f5f8fa;
          color: #1968fa;
        }
        .pdf-box:hover a {
          color: #1968fa;
        }
        .pd-box {
          display: flex;
          align-items: center;
          padding: 20px 0px;
          .text {
            // margin-right: 10px;
            font-size: 16px;
            text-align: left;
            // width: 180px;
            word-break: break-all;
          }
        }
        .vd-box {
          cursor: pointer;
          color: #333;
          .text {
            font-size: 16px;
            // margin-right: 10px;
            text-align: left;
            // width: 180px;
            word-break: break-all;
          }
          width: 100%;
          padding: 20px;
          display: flex;
          align-items: center;
        }
        .vd-box:hover {
          background: #f5f8fa;
          color: #1968fa;
        }
        .zheDie:hover {
          background: #f5f8fa;
          color: #1968fa;
        }
      }
    }
    .neck-box {
      margin: 30px 0px;
      background: #fff;
      display: flex;
      width: 100%;
      align-items: center;
      border-radius: 10px 10px 10px 10px;
      .neck-img {
        padding: 30px 20px;
        // flex: 0.3;
        height: 180px;
      }
      .neck-content {
        .title {
          padding-bottom: 20px;
          font-size: 18px;
          color: #333;
        }
        .sign {
          .stu {
            margin-right: 44px;
            color: #737980;
          }
          .time {
            color: #737980;
          }
        }
      }
    }
  }
}
</style>
